var processor = {
    fixViewport: function (type, width) {
        var docEl = document.documentElement;
        var metaEl = document.querySelector('meta[name="viewport"]');
        var clientWidth = Math.min(docEl.clientWidth, docEl.clientHeight);
        var scale, content;
        
        switch (type) {
            case 'fixed':
                scale = clientWidth / width;
                content = 'width=' + width + ',initial-scale=' + scale + ',maximum-scale=' + scale +
                    ',minimum-scale=' + scale;
                break;
            case 'rem':
                var dpr = window.devicePixelRatio || 1;
                docEl.setAttribute('data-dpr', dpr);
                docEl.style.fontSize = 100 * (clientWidth * dpr / width) + "px";

                scale = 1 / dpr;
                content = 'width=' + clientWidth * dpr + ',initial-scale=' + scale + ',maximum-scale=' + scale +
                    ', minimum-scale=' + scale;
                break;
        }
        
        metaEl.setAttribute('content', content);
    },
    doLoad: function(){
        var _this = this;
        var arrImg = ['img/bg1.jpg','img/bg2.jpg', 'img/bg3.jpg', 'img/bg4-1.jpg', 'img/bg4-2.jpg', 'img/bg4-3.jpg', 'img/bg4-4.jpg','img/bg5.jpg', 'img/bg8.jpg', 'img/bg9-1.jpg', 'img/bg9-2.jpg', 'img/bg9-3.jpg', 'img/bg9-4.jpg', 'img/bg10.jpg', 'img/bg13.jpg', 'img/bg14.jpg', 'img/bg17.jpg', 'img/bg18-1.jpg', 'img/bg18-2.jpg', 'img/bg18-3.jpg', 'img/bg18-4.jpg', 'img/bg19.jpg', 'img/intro-bg1.jpg', 'img/intro-bg2.jpg', 'img/intro-bg3.jpg'];
        var total = arrImg.length, index = 0;

        function loadImage(url, callback){
            var img = new Image();
            img.src = url;
            
            if (img.complete) {
                callback();
                return;
            }
            img.onload = function () {
                callback();
                return;
            }
            img.onerror = function () {
                callback();
                return;
            }
        }

        function success(){
            if(index < total){
                index++;
            }
            var num = parseInt(index/total * 100);
            var progress = document.getElementById('progress');
            var percent = progress.firstChild;
            percent.innerHTML = num+' %';

            if(index == total){
                setTimeout(function(){
                    _this.main();
                    // _this.initMusic('media/music.mp3');
                },500)
                clearInterval(timeImage);
            }
        }

        var timeImage = setInterval(function(){
            loadImage(arrImg[index], success);
        }, 100);
    },
    main: function(){
        var progress = document.getElementById('progress');
        progress.style.display = 'none';

        var swiperBoot = new Swiper('.swiper-boot', {
            autoplay: 1500,
            autoplayStopOnLast: true,
            effect : 'fade',
            fade: {
                crossFade: false,
            },
            onInit: function(swiper){
                swiperAnimateCache(swiper);
                swiperAnimate(swiper); 

                var b1 = document.getElementsByClassName('b1')[0];
                var txt = b1.children[0];
                txt.style.visibility = 'visible';
            },
            onSlideChangeEnd: function(swiper){
                swiperAnimate(swiper);

                //一个swiper播放结束
                if(swiper.isEnd){
                    setTimeout(function(){
                        var boot = document.getElementById('boot'),
                            pages = document.getElementById('pages');
                        function pageActive(){
                            pages.classList.add('active');
                        }
                        boot.classList.add('animated', 'fadeOut');
                        boot.addEventListener('webkitAnimationEnd', pageActive);
                        boot.addEventListener('animationend', pageActive);

                        var swiperVertical = new Swiper ('.swiper-vertical', {
                            direction: 'vertical',
                            onInit: function(swiper){
                                swiperAnimateCache(swiper);
                                swiperAnimate(swiper);
                            },
                            onSlideChangeEnd: function(swiper){
                                swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
                            }
                        });

                        
                    }, 2000);
                }
            }
        });


        var swiperHorizontal = new Swiper('.swiper-horizontal', {
            direction: 'horizontal',
            // 如果需要前进后退按钮
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            onInit: function(swiper){
                swiperAnimateCache(swiper); //隐藏动画元素
                swiperAnimate(swiper);  //初始化完成开始动画
            },
            onSlideChangeEnd: function(swiper){
                swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
            }
        });
    },
    initMusic: function(url){
        var options = {
            autoplay: true,
            loop: true,
            src: url
        }
        if(!options.src){
            return
        }
        var className = 'on',
            music = document.getElementById('music'),
            trigger = 'ontouchstart' in window ? 'touchstart' : 'click',
            audio = document.createElement('audio');
        audio.src = options.src;

        /*function start() {
            document.removeEventListener(trigger, start, false)
            if (!audio.paused)
                return
            audio.play()
        }*/

        function toggle(e) {
            e.stopPropagation()
            !audio.paused ? audio.pause() : audio.play()
        }

        function play(e) {
            $(music).addClass(className);
        }

        function pause(e) {
            $(music).removeClass(className);
        }

        audio.addEventListener('play', play, false);
        audio.addEventListener('pause', pause, false);
        music.addEventListener(trigger, toggle, false);

        if (options.loop) {
            audio.loop = 'loop';
        } else {
            audio.addEventListener('ended', pause, false);
        }

        if (options.autoplay) {
            audio.play()
            // document.addEventListener(trigger, start, false)
        }

        $(music).show()
            return audio
    }
}

processor.fixViewport('fixed', 640);
window.onload = function() {
    processor.doLoad();
}